<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mouse Stroke - Help</title>
<link type="text/css" rel="stylesheet" href="options.css" />
<script type="text/javascript" src="essentials.js"></script>
<script type="text/javascript" src="stroke.js"></script>
<script type="text/javascript">
/* the id of stroke command, whose stroke sequence is being setted */
var command_id = null;

/* default configuration */
var config, def_config = JSON.parse(localStorage.getItem('def_config'));

/* port to the background page */
var bpage = chrome.extension.connect({name: 'stroke.html-config'});

/* convert id to a readable label */
var id2label = function(id)
{
	/* replace hyphens to spaces, then capitalize the first letter */
	return id.replace(/\-/g, ' ').replace(/\w+/g, function(s) {
		return s.charAt(0).toUpperCase() + s.substring(1);
	});
}

/* construct the config form */
var construct = function(conf)
{
	var tb = $get('stroke-tbody'), tr, td, input, button, cat;

	/* restore options */
	$get('trigger').value = conf.trigger;
	$get('timeout').value = conf.timeout;
	$get('minstep').value = conf.minstep;
	$get('dotrail').checked = conf.dotrail;

	/* stroke categories will be flatted for easy referring */
	conf.strokes = {};

	/* restore stroke settings */
	for (key in conf.categories) {
		tr = $create('tr');
		/* categories */
		tr.appendChild($create('th', {
			className: 'title',
			colSpan: 2,
			innerHTML: id2label(key)
		}));
		tb.appendChild(tr);

		/* strokes */
		cat = conf.categories[key];
		for (key in cat) {
			tr = $create('tr');
			/* label */
			tr.appendChild($create('td', {
				className: 'label',
				innerHTML: id2label(key)
			}));
			/* input field */
			input = $create('input', {
				id: key,
				type: 'text',
				disabled: true,
				className: 'stroke-field',
				value: cat[key].join(' ')
			});
			/* set button */
			button = $create('button', {
				className: 'set-stroke-btn',
				'for': key,
				innerHTML: 'Set Stroke'
			});
			button.addEventListener('click', function(e) {
				/* set the command id */
				command_id = e.target['for'];
				/* display the overlay, waiting for input */
				$show('overlay');
			}, false);

			td = $create('td', { className: 'field' });
			td.appendChild(input);
			td.appendChild(button);
			tr.appendChild(td);
			tb.appendChild(tr);

			/* flat categories, all operations on conf.strokes should
			 * done by reference, so that changes can be reflected
			 * to their counterparts in conf.categories */
			conf.strokes[key] = cat[key];
		}
	}

	/* bind restore/save button listener */
	$get('restore').addEventListener('click', restore, false);
	$get('save').addEventListener('click', harvest, false);
}

/* save settings */
var harvest = function()
{
	var i, inputs = $get('stroke-tbody').getElementsByClassName('stroke-field');

	config.trigger = parseInt($get('trigger').value);
	config.timeout = parseInt($get('timeout').value);
	config.minstep = parseInt($get('minstep').value);
	config.dotrail = $get('dotrail').checked;

	/* save locally */
	localStorage.setItem('config', JSON.stringify(config));
	/* tell the background page to reload config */
	bpage.postMessage('reload');
	location.reload(true);
}

/* restore default settings */
var restore = function()
{
	localStorage.removeItem('config');
	bpage.postMessage('reload');
	location.reload(true);
}

window.addEventListener('load', function() {
	/* fallback to def_config if config from local storage is empty */
	try {
		if (!(config = JSON.parse(localStorage.getItem('config')))) {
			config = def_config;
		}
	} catch (ex) {
		console.error(ex);
		config = def_config;
	}
	construct(config);
});

/* listen to the stroke detecting script */
document.addEventListener('set-stroke-event', function(ev) {
	var k, input = $get(command_id), strokes = ev.strokes, seq = strokes.join(' ').trim();
	if (input) {
		/* check duplicates */
		for (k in config.strokes) {
			if (command_id != k && seq == config.strokes[k].join(' ')) {
				if (confirm('Stroke "' + seq + '" conflicts with [' + id2label(k) + '], overwrite?')) {
					$get(k).value = '';
					/* operate on reference */
					config.strokes[k].splice(0, config.strokes[k].length);
					break;
				} else {
					return;
				}
			}
		}
		input.value = seq;
		/* operate on the array reference */
		var ref = config.strokes[command_id]
		ref.splice.apply(ref, [0, ref.length].concat(strokes));
	}
	$hide('overlay');
	command_id = null;
}, false);
</script>
<body>

<div id="overlay" class="overlay hidden">
 <h1>I'm waiting for your input</h1>
</div>

<div id="root" class="root">
 <h1>Mouse Stroke (<a href="http://code.google.com/p/chrome-mouse-stroke/" target="_blank">Homepage</a>)</h1>

 <p>
  This is a Google Chrome extension which enables mouse strokes (also known as
  mouse gestures) in the browser. With this extension, you can perform common
  tasks by simply wipe your mouse.
 </p>

 <div class="eye-catcher">
  <p>Users of previous versions, if the extension doesn't work, or, if you can not
  set strokes, please try the "RESTORE TO DEFAULT" button. If you still have
  problems after press that button, please report at the
  <a href="http://code.google.com/p/chrome-mouse-stroke/issues/list">support page</a>.
  Thank you.</p>
  <p>Note that due to the security restrictions of Google Chrome extension system,
  the extension works in regular web pages only (any http:// or https:// sites)
  at this time, that means your strokes won't work in pages like "chrome://newtab"
  or "chrome://extensions".</p>
 </div>

 <table id="option-table" class="option-table" cellpadding="0" cellspacing="0" border="0">

  <tbody id="option-tbody">
   <tr>
    <th class="title" colspan="2">Options</th>
   </tr>
   <tr>
    <td class="label">Trigger</td>
    <td class="field">
     <select id="trigger">
      <option value="0">Left Mouse Button</option>
      <!--option value="1">Middle Mouse Button</option-->
      <option value="2">Right Mouse Button</option>
     </select>
    </td>
   </tr>
   <tr>
    <td class="label">Stroke Timeout (Milliseconds)</td>
    <td class="field">
     <input id="timeout" type="text"/>
    </td>
   </tr>
   <tr>
    <td class="label">Minimum Step (Pixels)</td>
    <td class="field">
     <input id="minstep" type="text"/>
    </td>
   </tr>
   <tr>
    <td class="label">Draw Trails</td>
    <td class="field">
     <input id="dotrail" type="checkbox"/>
    </td>
   </tr>
  </tbody>

  <tbody id="stroke-tbody">
  </tbody>

  <tbody>
   <tr>
    <th colspan="2">
     <button id="restore">RESTORE TO DEFAULT</button>
     <button id="save">SAVE</button>
    </th>
   </tr>
  </tbody>

 </table>

</div>
</body>
</html>